<template>
	<view class="my-box">
		<view class="bg-box">
			<view class="img-box"><image class="img-header" src="../../static/user.jpg" mode=""></image></view>
			<view class="info-box">
				<u-row gutter="0">
					<u-col span="6"><view class="info-left">姓名</view></u-col>
					<u-col span="6"><view class="info-right">{{name}}</view></u-col>
				</u-row>
				<u-line color="#efefef" />
				<u-row gutter="0">
					<u-col span="6"><view class="info-left">电话</view></u-col>
					<u-col span="6"><view class="info-right">{{phone}}</view></u-col>
				</u-row>
				<u-line color="#efefef" />
				<u-row gutter="0">
					<u-col span="6"><view class="info-left">添加日期</view></u-col>
					<u-col span="6"><view class="info-right">{{time}}</view></u-col>
				</u-row>
			</view>
		</view>
		<view class="btn-box">
			<u-button class="btn-item" @click="outLogin()" type="primary">退出登录</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			num: 123.453,
			name: '',
			phone: '',
			time: new Date().toLocaleDateString()
		};
	},
	created() {
		console.log()
		let data = uni.getStorageSync('user');
		this.name = data.username
		this.phone = data.phone
	},
	methods: {
		outLogin(){
			uni.redirectTo({
			    url: '../index/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.bg-box {
	height: 400rpx;
	background-color: #5c92ff;
	padding: 0rpx 30rpx;
	margin-bottom: 200rpx;
	.img-box {
		text-align: center;
		.img-header {
			width: 234rpx;
			height: 234rpx;
			border-radius: 117rpx;
		}
	}
	.info-box {
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 40rpx;
		padding: 20rpx 40rpx;
		.info-left {
			font-size: 30rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 40rpx;
			letter-spacing: 1rpx;
			color: #b1b8c8;
			padding: 20rpx 0px;
		}
		.info-right {
			font-size: 30rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 40rpx;
			letter-spacing: 1rpx;
			color: #2c3240;
			text-align: right;
			font-weight: bold;
			padding: 20rpx 0px;
		}
	}
}
.btn-box {
	padding: 30rpx;
	.btn-item {
		margin-bottom: 40rpx;
	}
}
</style>
